<template>
  <div>
    <h2>TsPage</h2>

    <ul class="page">
      <li :class="{ active: pagevalue === 1 }" @click="$emit('update:pagevalue', 1)">1</li>
      <li :class="{ active: pagevalue === 2 }" @click="$emit('update:pagevalue', 2)">2</li>
      <li :class="{ active: pagevalue === 3 }" @click="$emit('update:pagevalue', 3)">3</li>
      <li :class="{ active: pagevalue === 4 }" @click="$emit('update:pagevalue', 4)">4</li>
      <li :class="{ active: pagevalue === 5 }" @click="$emit('update:pagevalue', 5)">5</li>
    </ul>
  </div>
</template>
<script>
export default {
  // model: {
  //   prop: 'pagevalue',
  //   event: 'update:pagevalue'
  // },
  props: {
    pagevalue: {
      type: Number,
      default: 1
    }
  }
}
</script>
<style lang="scss">
.page {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-wrap: nowrap;

  li {
    width: 40px;
    height: 40px;
    border: solid;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    &.active {
      background: yellowgreen;
      color: white;
    }
  }
}
</style>